<template>
	<view class="content">
		<biground class="big" :prizeList="COOKLIST" @roundChange="getRoundList"></biground>
		<view class="operation_area">
			<view class="btns">
				<view class="clear" @click="clear">清空大转盘</view>
				<view class="add" @click="add">添加菜谱</view>
			</view>
		</view>
		<view class="getRecipe" v-if="getRecipeList  && getRecipeList.length>0">
			<text>下厨日历</text>
			<scroll-view :scroll-x="true" class="scroll_view">
				<view class="view_flex">
					<view class="view_item" v-for="(itm,idx) in getRecipeList" :key="idx">
						<view class="date">{{itm.date}} ( {{itm.day}} )</view>
						<view class="item">菜品名称: <text style="color:#e94829;font-weight: 600;"> {{itm.recipe}}</text></view>
					</view>
				</view>
				
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
import biground from '@/components/lucky-turntable/lucky-turntable.vue'
import { onMounted, ref } from 'vue';
const COOKLIST=ref([])
const getRecipeList=ref([
	
])
const clear=()=>{
	uni.showModal({
		title: '温馨提示',
		content: '确定清空大转盘菜谱吗？',
		success: function (res) {
			if (res.confirm) {
				COOKLIST.value=[]
				uni.removeStorageSync('localRecipeList')
			} 
		}
	});
}
const add=()=>{
	console.log(2);
	uni.navigateTo({
		url:'/pages/index/addMenu'
	})
}
const getRoundList=(e)=>{
	let list = uni.getStorageSync('getRecipeList') ? uni.getStorageSync('getRecipeList') : [];
	const dayMap = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
	let week = new Date().getDay();
	let weekStr = dayMap[week];
	const year = new Date().getFullYear()
	const month = Number(new Date().getMonth() + 1) < 10 ? '0' + Number(new Date()
		.getMonth() + 1) : Number(new Date().getMonth() + 1)
	const day = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date()
		.getDate()
	const date = year + '-' + month + '-' + day
	
	if(list.length>0){
		let is_new=true
		list.some((itm,idx)=>{
			if(itm.date== date){
				list[idx].recipe=e
				is_new=false
			}
			if(idx==list.length-1 && is_new){
				list?.push({recipe:e,day:weekStr,date:date})
			}
		})
	}else{
		list?.push({recipe:e,day:weekStr,date:date})
	}
	console.log('add2',list);
	getRecipeList.value=list
	uni.setStorageSync('getRecipeList',list)
}
const getList=()=>{
	let list = uni.getStorageSync('localRecipeList') ? uni.getStorageSync('localRecipeList') : [];
	let list_2 = uni.getStorageSync('getRecipeList') ? uni.getStorageSync('getRecipeList') : [];
	COOKLIST.value = list
	// getRecipeList.value=list_2
	if(COOKLIST.value.length==0){
		uni.showModal({
			title: '温馨提示',
			content: '检测到没有添加菜品，去添加你的拿手好菜吧！',
			success: function (res) {
				if (res.confirm) {
					uni.navigateTo({
						url:'/pages/index/addMenu'
					})
				} else if (res.cancel) {
				
				}
			}
		});
	}
}
onMounted(()=>{
	getList()
})
</script>

<style lang="scss" scoped>
	.getRecipe{
		height:auto;
		background-color: #fff;
		border-radius: 12rpx;
		width:90%;
		margin: 0 auto;
		margin-top: 40rpx;
		
		padding:20rpx;
		text {
			margin-bottom: 20rpx;
			color: #88abda;
		}
		.scroll_view{
			max-height:200rpx;
			width:750rpx;
			margin: 0 auto;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 20rpx;
			.view_flex{
				display: flex;
				max-height:160rpx;
				align-items: center;
				font-size: 36rpx;
				// border: 1rpx solid #999;
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				gap:100rpx;
				.view_item{
					width:700rpx;	
					padding:20rpx;
					border: 1rpx solid #999;
					
						.date{
							font-weight: 600;
							width:750rpx;
							text-align: center;
							
						}
					.item{
						width:750rpx;
						text-align: center;
						margin-top: 15rpx;
					}
				}
			}
			
		}
	}
	.content {
		background: linear-gradient(60deg, #17ead9, #6078ea);
		height:100vh;
		width:100%;
		padding-top: 50px;
	}
	.operation_area{
		width:710rpx;
		margin: 0 auto;
		margin-top: -20rpx;
		.tips{
			width: 100%;
			text-align: center;
			font-size: 15px;
			color:#f39c12;
		}
		.btns{
			margin-top: 50rpx;
			width:710rpx;
			display: flex;
			justify-content: space-between;
			font-weight: 600;
			.clear{
				width:200rpx;
				padding:30rpx 60rpx;				
				background-color: #fff;
				border-radius: 12rpx;
				font-size: 38rpx;
				text-align: center;
				color:#6078ea;
			}
			.add{
				width:200rpx;
				padding:30rpx 60rpx;
				background-color: #fff;
				border-radius: 12rpx;
				font-size: 38rpx;
				text-align: center;
				color:orange;
			}
		}
	}

</style>
